import React, { useEffect, useState, useRef } from 'react'
import { Col, Row, Card, Table } from 'antd'
import './index.css'
import * as Icon from '@ant-design/icons'
import * as echarts from 'echarts'
// import { getData } from '../../api'
import { useApi } from '../../api'
import MyEcharts from '../../components/Echarts'
import { storage } from '../../utils'

const { getItem } = storage

const columns = [
  {
    title: '课程',
    dataIndex: 'name'
  },
  {
    title: '今日购买',
    dataIndex: 'todayBuy'
  },
  {
    title: '本月购买',
    dataIndex: 'monthBuy'
  },
  {
    title: '总购买',
    dataIndex: 'totalBuy'
  }
]
const countData = [
  {
    name: '今日支付订单',
    value: 1234,
    icon: 'CheckCircleOutlined',
    color: '#2ec7c9'
  },
  {
    name: '今日收藏订单',
    value: 3421,
    icon: 'ClockCircleOutlined',
    color: '#ffb980'
  },
  {
    name: '今日未支付订单',
    value: 1234,
    icon: 'CloseCircleOutlined',
    color: '#5ab1ef'
  },
  {
    name: '本月支付订单',
    value: 1234,
    icon: 'CheckCircleOutlined',
    color: '#2ec7c9'
  },
  {
    name: '本月收藏订单',
    value: 3421,
    icon: 'ClockCircleOutlined',
    color: '#ffb980'
  },
  {
    name: '本月未支付订单',
    value: 1234,
    icon: 'CloseCircleOutlined',
    color: '#5ab1ef'
  }
]

// 动态获取icon
const iconToElement = props => React.createElement(Icon[props.icon], { className: props.style })

function Home() {
  //请求接口
  const { getData } = useApi()

  const [tableData, setTableData] = useState([])
  const [echartData, setEchartData] = useState({})

  const jurisdiction = useRef(getItem('jurisdiction'))

  // 获取初始数据
  useEffect(() => {
    // 获取图标数据
    ;(async () => {
      let res = await getData()
      const { tableData, orderData, userData, videoData } = res
      // console.log('11', res.data)

      setTableData(tableData)

      //对于echarts数据的组装
      const order = orderData
      // x轴的数据
      const xData = order.date
      // series数据的组装
      const keyArray = Object.keys(order.data[0])
      const series = []
      keyArray.forEach(key => {
        series.push({
          name: key,
          data: order.data.map(item => item[key]),
          type: 'line'
        })
      })
      setEchartData({
        ...echartData,
        order: {
          xData,
          series
        },
        user: {
          xData: userData.map(item => item.date),
          series: [
            {
              name: '新增用户',
              data: userData.map(item => item.new),
              type: 'bar'
            },
            {
              name: '活跃用户',
              data: userData.map(item => item.active),
              type: 'bar'
            }
          ]
        },
        video: {
          series: [
            {
              data: videoData,
              type: 'pie'
            }
          ]
        }
      })
    })()
  }, [])

  return (
    <Row>
      <Col span={8}>
        <Card hoverable>
          <div className="flex items-center pb-[0.25rem] mb-[0.25rem] border-b-[0.0125rem] border-solid border-[#ccc] overflow-hidden">
            <img
              src="	http://localhost:89/uploads/50e7f48ec7974d5258bf0ee70948c162.jpg"
              className="w-[1.875rem] h-[1.875rem] rounded-[50%] mr-[0.5rem]"
            ></img>
            <div className="userinfo">
              <p className="text-[0.4rem] mb-[0.125rem] ml-[0.25rem]">{jurisdiction.current}</p>
              <p className="text-[0.2rem] ml-[0.2rem]">
                {jurisdiction.current == 'adminUser' ? '管理员' : '普通用户'}
              </p>
            </div>
          </div>
          <div className="flex items-start flex-col">
            <p className="leading-[0.35rem] text-[0.175rem] text-[#999] ">
              上次登录的时间：<span className="text-[#666] ml-[0.75rem]">2024-8-12</span>
            </p>
            <p className="leading-[0.35rem] text-[0.175rem] text-[#999]">
              上次登录的地点：<span className="text-[#666] ml-[0.75rem]">深圳</span>
            </p>
          </div>
        </Card>
        <Card hoverable className="mt-[0.225rem]">
          <Table
            rowKey={'name'}
            dataSource={tableData}
            columns={columns}
            pagination={false}
            className="overflow-hidden"
          ></Table>
        </Card>
      </Col>
      <Col span={16}>
        <div className="flex flex-wrap overflow-hidden">
          {countData.map((item, index) => {
            return (
              <Card key={index} className="w-[33%] flex justify-center">
                <div className="flex  pl-[0.3125rem] pr-[0.3125rem] pt-[0.125rem] pb-[0.125rem]">
                  <div
                    className="w-[1rem] h-[1rem] text-center leading-[1.0625rem] text-[white] rounded-tl-[0.0625rem] rounded-bl-[0.0625rem]"
                    style={{ backgroundColor: item.color }}
                  >
                    {iconToElement({ icon: item.icon, style: 'text-[0.375rem] mb-[0.125rem]' })}
                  </div>
                  <div className="text-[.175rem] flex flex-col justify-center ml-[.25rem]">
                    <p>￥{item.value}</p>
                    <p>{item.name}</p>
                  </div>
                </div>
              </Card>
            )
          })}
        </div>
        {echartData.order && (
          <MyEcharts
            chartData={echartData.order}
            id="main"
            style={{ height: '3.5rem', overflow: 'hidden' }}
          ></MyEcharts>
        )}
        <div className="flex mt-[0.25rem] overflow-hidden">
          {echartData.user && (
            <MyEcharts chartData={echartData.user} style={{ width: '50%', height: '3rem' }} />
          )}
          {echartData.video && (
            <MyEcharts
              chartData={echartData.video}
              isAxisChart={false}
              style={{ width: '50%', height: '3.25rem' }}
            />
          )}
        </div>
      </Col>
    </Row>
  )
}

export default Home
